<template>
  <!-- 新增结算单弹窗 -->
  <el-dialog
    v-el-drag-dialog
    class="AddSettlementDialog"
    title="新增结款单"
    :visible.sync="visible"
    width="700px"
    @closed="close"
  >
    <el-form ref="dataForm" :model="temp" label-position="right" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="客户编号:" prop="csmCode">
            <el-input v-model="temp.csmCode" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户名称:" prop="csmName">
            <el-input v-model="temp.csmName" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="联系电话:" prop="csmPhone">
            <el-input v-model="temp.csmPhone" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结款门市:" prop="store">
            <el-tree-select
              v-model="store"
              :clearable="false"
              class="tree-select"
              :popover-width="360"
              :select-params="{
                clearable: true,
                multiple: true,
                placeholder: '请选择',
              }"
              :tree-params=" {
                'expand-on-click-node': false,
                'highlight-current': true,
                'filterable': true,
                props:{
                  value:'orgId',
                  label: 'orgName',
                  disabled: 'disabled',
                },
                data: storeList
              }"
            />
          </el-form-item>
          <!--          <el-form-item label="结款门市:" prop="store">-->
          <!--            <el-select v-model="store" multiple collapse-tags>-->
          <!--              <el-option-->
          <!--                v-for="item in temp.storeList"-->
          <!--                :key="item.orgId"-->
          <!--                :label="item.orgName"-->
          <!--                :value="item.orgId"-->
          <!--              />-->
          <!--            </el-select>-->
          <!--          </el-form-item>-->
        </el-col>
      </el-row>
      <el-form-item label="联系地址:" prop="csmAddress">
        <el-input v-model="temp.csmAddress" disabled />
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="本期账单截至日期:" prop="endDt" label-width="135px">
            <el-date-picker
              v-model="SettlementStore.endDt"
              :picker-options="pickerOptions"
              type="date"
              placeholder="选择日期时间"
              @change="changeDate"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">关闭</el-button>
      <el-button type="primary" @click="success">生成</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { queryMonthSettlementStoreList, monthSettlementSaveBill } from '@/api'
  import moment from 'dayjs'
  import getTreeData from '@/utils/jsonTree'
  export default {
    name: 'add',
    data() {
      return {
        visible: false,
        temp: {},
        storeList: [],
        store: [], // 门店信息
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e7
          }
        },
        SettlementStore: {
          csmId: '', // 用户id
          endDt: '' // 本期账单截至日期
        }
      // time:''        //本期账单截至日期默认最新时间
      }
    },
    watch: {
      store(newval) {
        this.storeList.map(item => {
          if (item.orgId === newval[0]) {
            this.temp.csmAddress = item.csmAddress
          }
        })
      }
    },
    created() {},
    mounted() {},
    methods: {
      // 获取最新时间
      getNewTimer() {
        const date = moment().add(-1, 'day')
        // console.log(date)
        this.SettlementStore.endDt = date.toString()
        this.getSettlementStore(this.SettlementStore)
      },
      // 获取结款门市方法
      async getSettlementStore(data) {
        const res = await queryMonthSettlementStoreList(data)
        const storeList = res.data
        this.storeList = getTreeData(storeList)
        this.temp = { ...this.temp, storeList }
        if (res.data.length === 1 && res.data[0].orgId) {
          this.$nextTick(() => {
            this.store = [res.data[0].orgId]
          })
        }
      },
      changeDate(value) {
        const date = moment(value)
        this.SettlementStore.endDt = date.toString()
        this.getSettlementStore(this.SettlementStore)
      },
      async open(temp) {
        this.SettlementStore.csmId = temp.csmId.toString()
        this.temp = Object.assign({}, temp)
        await this.getNewTimer()
        this.SettlementStore.endDt = moment(this.SettlementStore.endDt).format('YYYY-MM-DD')
        this.visible = true
      },
      success() {
        if (!this.SettlementStore.csmId) {
          this.$message.error('请选择客户')
          return
        }
        if (!this.SettlementStore.endDt) {
          this.$message.error('请选择本期账单截至日期')
          return
        }
        if (!this.store.length) {
          this.$message.error('请选择结款门市')
          return
        }

        this.submit()
      },
      async submit() {
        const params = {
          csmId: this.SettlementStore.csmId,
          csmAddress: this.temp.csmAddress,
          orgIds: this.store.join(','),
          endDt: moment(this.SettlementStore.endDt).format()
        }

        const { status } = await monthSettlementSaveBill(params)
        if (status === 200) {
          this.$notify({
            title: '提示',
            message: '新增结款成功',
            type: 'success',
            duration: 2000
          })
          this.$emit('refresh')
          this.close()
        }
      },

      close() {
        this.visible = false
        this.temp = {}
        this.SettlementStore = {
          csmId: '',
          endDt: ''
        }
        this.store = []
      }
    }
  }
</script>

<style lang="scss" scoped>
.AddSettlementDialog {
  /deep/.el-date-editor {
    width: 100%;
  }
}
</style>
